//选项卡点击
$('.three-choice p').click(function () {
    $('.three-choice p').removeAttr('class')
    $(this).attr('class', 'tab-active')
    $('#tab>section>div').removeAttr('class')
    let index = $(this).index()
    $('#tab>section>div').eq(index).attr('class', 'active')
})
//划过
$('.div').hover(function () {
    //$('.div').slideDown(1000)
    $('.span').css({

        transform: 'rotate(180deg)'
    })
    $('.slide_down').css({
        display: 'flex'
    })

}, function () {
    $('.slide_down').hide()
    $('.span').css({

        transform: 'rotate(360deg)'
    })

})
$('#nav li').hover(function () {
    $(this).css({
        borderBottom: '4px solid yellow',
        color: 'white',
    })
}, function () {
    $(this).css({
        border: 'none',
        color: 'rgb(170, 170, 170)',
    })
})
//侧边栏
$('.slide_top').click(function () {
    $('html,body').animate({
        scrollTop: '0px'
    }, 400);
});
$('.glyphicon-download').click(function () {
    $('html,body').animate({
        scrollTop: '10500px'
    }, 400);
});
var obj;
$('#aside>div').hover(function () {
    $(this).find('section').show()
}, function () {
    $(this).find('section').hide()

})

//发送请求
let p = new URLSearchParams(location.search)
let pid = p.get('pid')

var obj;
if (pid) {
    $.get('http://localhost:3000/pro-list', function (res) {
        obj = res.find(v => {

            return v.pid == pid
        })
        $('#main .left>div img').attr('src', obj.pimg)
        $('#main .left>section').html(`
        <p><img src="${obj.pdesc[0]}" alt="" width="74" height="70"></p>
        <p><img src="${obj.pdesc[1]}" alt="" width="74" height="70"></p>
        <p><img src="${obj.pdesc[2]}" alt="" width="74" height="70"></p>
        <p><img src="${obj.pdesc[3]}" alt="" width="74" height="70"></p>
        <p><img src="${obj.pdesc[4]}" alt="" width="74" height="70"></p>
`)
        $('#main .right .right-top').html(`

<h2>${obj.pitle}</h2>
<p>购买组合款赠专属亚克力背景板~【亚克力板安装前请撕掉保护膜】</p>
<span>￥${obj.pprice}</span>
<p>❤聚豆 可用30聚豆抵扣3.00元 <span>（限时）</span></p>


`)
        console.log(obj);
        toggle()
    }, 'json')
}
toggle()
//小图切换
function toggle() {
    $('#main .left section>p').click(function () {
        $('#main .left section>p').css({
            border: '1px solid rgb(148, 148, 148)'
        })
        $(this).css({
            border: '2px solid red'
        })
        let url = $(this).children().attr('src')
        $('#main .left>div img').attr('src', url)
    })
}
//点击增添商品
$('.add-btn').click(function () {

    $(this).prev().html($(this).prev().html() - 0 + 1)
})

$('.down-btn').click(function () {
    if ($(this).next().html() == 1) {
        console.log(111);
        $(this).next().html(1)
    } else {
        // console.log(222);
        $(this).next().html($(this).next().html() - 1)
    }

})
//加入购物车操作


let user = localStorage.getItem('uid')
console.log(user);

$.get('http://localhost:3000/card', function (res) {
    // console.log(res[0].data);
    res.forEach(a => {
        // console.log(a.uid,user);
        if (a.uid == user) {
            console.log(a.data);
            let arr = JSON.parse(a.data)
            console.log(arr);
            $('.cart span').html(arr.length)
        }
    })
}, 'json')
$('#add').click(function () {
    if (user) {
        $.get('http://localhost:3000/card', function (res) {
            console.log(res);
            res.forEach(v => {
                console.log(v);
                if (v.uid == user) {
                    let id = v.id
                    let pnum = $('.add-btn').prev().html();
                    obj.pnum = pnum
                    let data = v.data
                    data = JSON.parse(data)
                    console.log(data, obj); //数组
                    data.push(obj)
                    console.log(data);

                    let a = JSON.stringify(data)
                    // console.log(a);
                    let url = `http://localhost:3000/card/${id}`
                    $.ajax({
                        url,
                        data: {
                            pnum,
                            data: a
                        },
                        type: 'patch',
                        success() {
                            alert('加入成功')
                            if (user) {
                                $.get('http://localhost:3000/card', function (res) {
                                    // console.log(res[0].data);
                                    res.forEach(a => {
                                        // console.log(a.uid,user);
                                        if (a.uid == user) {
                                            //  console.log(a.data);
                                            let arr = JSON.parse(a.data)
                                            //  console.log(arr);
                                            $('.cart span').html(arr.length)
                                        }
                                    })
                                }, 'json')
                            }
                        }
                    })
                }
            });
        })

    } else {
        alert("请先登录！");
        // $('#login').trigger('click')
        window.location.href = "../html/home.html";
    }


})









//立即购买
// $('#buy').click(function () {

//     let pnum = $('.add-btn').prev().html()
//     obj.pnum = pnum
//     console.log(obj);
//     $.post('http://localhost:3000/mycar', obj, function () {
//         alert('加入成功')


//     })


// })

//放大镜
class bbox {
    constructor(obj) {
        //定义变量
        this.el = document.querySelector(obj.el)
        this.small = this.el.querySelector('.bigger')
        this.lg = document.querySelector('.large')

        this.sharder = this.el.querySelector('.sharder')
        this.big = this.el.querySelector('.smaller')

        this.bigImg = this.el.querySelector('#img1')
        //鼠标移入移出,让遮罩和大图显示和隐藏
        this.small.onmouseenter = () => {
            this.sharder.style.display = 'block'
            this.big.style.display = 'block'
            //调整遮罩和图片的比例关系
            //小图的宽/小遮罩宽 = 大图宽/大遮罩宽
            //大图宽 = 大遮罩宽*小图的宽/小遮罩宽
            /*  console.log(this.big.offsetWidth)
             console.log(this.small.offsetWidth)
             console.log(this.sharder.offsetWidth) */
            let bigImgWidth = this.big.offsetWidth * this.small.offsetWidth / this.sharder.offsetWidth
            let bigImgHeight = this.big.offsetHeight * this.small.offsetHeight / this.sharder.offsetHeight
            //offset只有在元素出现的时候才有值，元素隐藏掉了，所以不会有值
            //   console.log(bigImgWidth)
            this.bigImg.style.width = bigImgWidth + 'px'

            //监听鼠标在小图上面的移动
            this.small.onmousemove = (e) => {
                //   console.log(e)

                let sharderX = e.pageX - this.lg.offsetLeft - this.sharder.offsetWidth / 2;
                let sharderY = e.pageY - this.lg.offsetTop - this.sharder.offsetHeight / 2;
                // console.log(sharderX);
                //定边界
                if (sharderX <= 0) {
                    sharderX = 0;
                }
                if (sharderX >= this.small.offsetWidth - this.sharder.offsetWidth) {
                    sharderX = this.small.offsetWidth - this.sharder.offsetWidth;
                }

                if (sharderY <= 0) {
                    sharderY = 0;
                }

                if (sharderY >= this.small.offsetHeight - this.sharder.offsetHeight) {
                    sharderY = this.small.offsetHeight - this.sharder.offsetHeight;
                }

                this.sharder.style.left = sharderX + 'px';
                this.sharder.style.top = sharderY + 'px';


                let bigImgX = sharderX * bigImgWidth / this.small.offsetWidth

                let bigImgY = sharderY * bigImgHeight / this.small.offsetHeight

                this.bigImg.style.left = -bigImgX + 'px';
                this.bigImg.style.top = -bigImgY + 'px';



                //   console.log(sharderX,bigImgWidth,this.small.offsetWidth)


            }

        }
        this.small.onmouseleave = () => {
            this.sharder.style.display = 'none'
            this.big.style.display = 'none'
        }

    }
}
new bbox({
    el: ".large"
})